<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./layui/jquery.js"></script>
    <style>
        #window{
            width: 1800px;
            position: absolute;
            left: 50%;
            margin-left: -900px;
            /*border: 1px solid red;*/
        }
        #img-top{
            margin-left: 300px;
        }
        #leftDiv{
            position:relative;
        }
        #rightDiv{
            position:relative;
        }
        #rightBottom{
            position:relative;
        }
        #img-left{
            height: 50px;
            width: 100px;
            font-size: 30px;
            color: red;
            margin-left: 450px;
         }
        #img-right{
            height: 50px;
            width: 100px;
            font-size: 30px;
            color: red;
            margin-left: 200px;
        }
        #img-Bottom{
            height: 50px;
            width: 100px;
            font-size: 30px;
            color: red;
            margin-left: 200px;
        }
        #divLeft{
            /*border: 1px solid blue;*/
            width: 1000px;
            float: left;
        }
        #divRight{
            /*border: 1px solid green;*/
            width: 600px;
            float: right;
        }
        #Bottom{
            margin-left: 150px;
        }
    </style>
</head>
<body>
    <div id="window">
        <img src="./layui/bottom.png" alt="" id="img-top">
        <div style="width: 1800px;height: 50px"></div>

        <div id="divLeft">
            <div id="leftDiv" style="height: 50px;width: 1000px "><span  id="img-left">所有帖子</span></div>
            <div></div>
            <ul class="layui-timeline" id="table_body">
            </ul>
            <div id="turnPage" style="height:50px;width:260px; margin-left:370px;"></div>
        </div>
        <div id="divRight">
            <div id="rightDiv" style="height:50px; width:600px"><span id="img-right">最新发布 top10</span></div>
            <table id="tableRight">
                <tr style="font-size: 20px;color: darkorchid">
                    <td id="tdleft">序&nbsp;&nbsp;</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主题</td><td id="tdright">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;作者</td>
                </tr>
            </table>
            <div style="width: 600px;height: 50px"></div>
            <div id="rightBottom" style="height:50px; width:600px"><span id="img-Bottom">现在发帖</span></div>

                <div class="layui-form-item">
                    <label class="layui-form-label">主题</label>
                    <div class="layui-input-block">
                        <input type="text" name="titled" id="titled" required  lay-verify="required" placeholder="请输入主题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-inline">
                        <input type="text" name="author" id="author" required lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">辅助文字</div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">文本域</label>
                    <div class="layui-input-block">
                        <textarea name="content" id="content"  placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="plusArticle()">立即发布</button>
                    </div>
                </div>
        </div>
        <img src="./layui/top.png." alt="" id="Bottom">
    </div>

    <script>
        //console.log($.cookie('loginUser'));
        /*var cookiecheck = document.cookie;
        if(cookiecheck==""){
            alert('登录过期');
            window.location.href = "login.php";
        }*/

        window.onload = function(){
            $.ajax({
                url: "deal.php?model=newest",
                type: "POST",
                data: {},
                dataType: "json",
                success: function(res){
                    //console.log(res);
                    if (res.code == 1){
                        createTr(res.newData);
                    }else{
                        alert(101);
                    }
                }
            });
            $.ajax({
                url: "deal.php?model=articleShow",
                type: "POST",
                data: {},
                dataType: "json",
                success: function(res){
                    if (res.code == 1){
                        for (attr in res.smallData) {
                            createLi(res.smallData[attr],res.html);
                        }
                    }else{
                        alert(101);
                    }
                }
            });//newest

        }

        function createTr(data) {
            for (var i in data) {
                var htm = "<tr>";
                htm += "<td>"+ "&nbsp;" + (i) + "</td>";
                htm += "<td>"+ "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + data[i] + "</td>";
                htm += "</tr>";
                $("#tableRight").append(htm);
            }

        }

        function createLi(data,pageStyle){
            var time = data.create_at;
            var nowtime = time*1000;
            var timestr = new Date(nowtime);
            //console.log(data);
            var html = '<li class="layui-timeline-item">';
            html += '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
            html += '<div class="layui-timeline-content layui-text">';
            html += '<h3 class="layui-timeline-title">';
            html += timestr.toLocaleDateString();
            //html += data.create_at;
            //date('Y-m-d','1477019804')
            html += "</h3>";
            html += "<h4 >"+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+"主题："+"<strong>" + data.titled + "</strong>";
            html += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+ "作者：" + data.author + "</h4>";
            html += "<br>";
            html += "<p>" +"内容："+ data.content + "</p>";
            html += "</div></li>";
            $("#table_body").append(html);
            $("#turnPage").html(pageStyle);
        }

        function press(num) {
            $.ajax({
                url:"deal.php?model=articleShow",
                type:"POST",
                data:{
                    page:num
                },
                dataType:"json",
                success : function(res){
                    if(res.code==1){
                        $("#table_body").children().remove();
                        $("#turnPage").children().remove();
                        for(var attr in res.smallData){
                            createLi(res.smallData[attr],res.html);
                        }
                    }else{
                        alert("翻页错误");
                    }
                }
            });
        }

        function plusArticle(){
            $tempArr = isEmpty();
            $.ajax({
                url:'deal.php?model=plusArticle',
                type:'post',
                data:$tempArr,
                dataType:'json',
                async:false,
                success : function (resp) {
                    if(resp.code == 1){
                        alert(resp.msg);
                        location.reload();
                    }else{
                        alert(resp.msg);
                    }
                }
            });
        };

        function isEmpty() {
            $titled = $("#titled").val();
            $author = $("#author").val();
            $content = $("#content").val();
            //console.log($userName,$password,$nickName,$introduce);
            if($titled == ""){
                return alert('主题不能为空');
            }
            if($author == ""){
                return alert('作者不能为空');
            }
            if($content == ""){
                return alert('文本不能为空');
            }
            var dataObj = {
                'titled':$titled,
                'author':$author,
                'content':$content
            };
            return dataObj;
        }


    </script>
</body>
</html>
